﻿<div class="row">
    <div class="col-lg-12 col-sm-12 col-xs-12">
        <h5 class="row-title"><i class="fa fa-tags blue"></i>Labels & Badges</h5>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well with-header">
                    <div class="header bordered-purple">Default Labels & Badges</div>
                    <div class="labels-container">
                        <h6>Labels</h6>
                        <span class="label label-default">
                            Default
                        </span>
                        <span class="label label-primary">
                            Primary
                        </span>
                        <span class="label label-info">
                            Info
                        </span>
                        <span class="label label-success">
                            Success
                        </span>
                        <span class="label label-danger">
                            Danger
                        </span>
                        <span class="label label-warning">
                            Warning
                        </span>
                        <span class="label label-sky">
                            sky
                        </span>
                        <span class="label label-blueberry">
                            blueberry
                        </span>
                        <span class="label label-yellow">
                            yellow
                        </span>
                        <span class="label label-darkorange">
                            darkorange
                        </span>
                        <span class="label label-magenta">
                            magenta
                        </span>
                        <span class="label label-purple">
                            purple
                        </span>
                        <span class="label label-maroon">
                            maroon
                        </span>
                        <span class="label label-darkpink">
                            darkpink
                        </span>
                        <span class="label label-pink">
                            pink
                        </span>
                        <span class="label label-azure">
                            azure
                        </span>
                        <span class="label label-orange">
                            orange
                        </span>
                    </div>
                    <hr class="wide" />
                    <div class="Badges-container">
                        <h6>Badges</h6>
                        <span class="badge badge-default">
                            1
                        </span>
                        <span class="badge badge-primary">
                            2
                        </span>
                        <span class="badge badge-info">
                            3
                        </span>
                        <span class="badge badge-success">
                            4
                        </span>
                        <span class="badge badge-danger">
                            5
                        </span>
                        <span class="badge badge-warning">
                            6
                        </span>
                        <span class="badge badge-sky">
                            7
                        </span>
                        <span class="badge badge-blueberry">
                            8
                        </span>
                        <span class="badge badge-yellow">
                            9
                        </span>
                        <span class="badge badge-darkorange">
                            0
                        </span>
                        <span class="badge badge-magenta">
                            1
                        </span>
                        <span class="badge badge-purple">
                            2
                        </span>
                        <span class="badge badge-maroon">
                            3
                        </span>
                        <span class="badge badge-darkpink">
                            4
                        </span>
                        <span class="badge badge-pink">
                            5
                        </span>
                        <span class="badge badge-azure">
                            6
                        </span>
                        <span class="badge badge-orange">
                            7
                        </span>
                    </div>
                    <hr class="wide" />
                    <div class="Badges-container">
                        <h6>Square Badges</h6>
                        <span class="badge badge-default badge-square">
                            1
                        </span>
                        <span class="badge badge-primary badge-square">
                            2
                        </span>
                        <span class="badge badge-info badge-square">
                            3
                        </span>
                        <span class="badge badge-success badge-square">
                            4
                        </span>
                        <span class="badge badge-danger badge-square">
                            5
                        </span>
                        <span class="badge badge-warning badge-square">
                            6
                        </span>
                        <span class="badge badge-sky badge-square">
                            7
                        </span>
                        <span class="badge badge-blueberry badge-square">
                            8
                        </span>
                        <span class="badge badge-yellow badge-square">
                            9
                        </span>
                        <span class="badge badge-darkorange badge-square">
                            0
                        </span>
                        <span class="badge badge-magenta badge-square">
                            1
                        </span>
                        <span class="badge badge-purple badge-square">
                            2
                        </span>
                        <span class="badge badge-maroon badge-square">
                            3
                        </span>
                        <span class="badge badge-darkpink badge-square">
                            4
                        </span>
                        <span class="badge badge-pink badge-square">
                            5
                        </span>
                        <span class="badge badge-azure badge-square">
                            6
                        </span>
                        <span class="badge badge-orange badge-square">
                            7
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well with-header">
                    <div class="header bordered-sky">Graded Labels & Badges</div>
                    <div class="labels-container">
                        <h6>Labels</h6>
                        <span class="label label-default graded">
                            Default
                        </span>
                        <span class="label label-primary graded">
                            Primary
                        </span>
                        <span class="label label-info graded">
                            Info
                        </span>
                        <span class="label label-success graded">
                            Success
                        </span>
                        <span class="label label-danger graded">
                            Danger
                        </span>
                        <span class="label label-warning graded">
                            Warning
                        </span>
                        <span class="label label-sky graded">
                            sky
                        </span>
                        <span class="label label-blueberry graded">
                            blueberry
                        </span>
                        <span class="label label-yellow graded">
                            yellow
                        </span>
                        <span class="label label-darkorange graded">
                            darkorange
                        </span>
                        <span class="label label-magenta graded">
                            magenta
                        </span>
                        <span class="label label-purple graded">
                            purple
                        </span>
                        <span class="label label-maroon graded">
                            maroon
                        </span>
                        <span class="label label-darkpink graded">
                            darkpink
                        </span>
                        <span class="label label-pink graded">
                            pink
                        </span>
                        <span class="label label-azure graded">
                            azure
                        </span>
                        <span class="label label-orange graded">
                            orange
                        </span>
                    </div>
                    <hr class="wide" />
                    <div class="Badges-container">
                        <h6>Badges</h6>
                        <span class="badge badge-default graded">
                            1
                        </span>
                        <span class="badge badge-primary graded">
                            2
                        </span>
                        <span class="badge badge-info graded">
                            3
                        </span>
                        <span class="badge badge-success graded">
                            4
                        </span>
                        <span class="badge badge-danger graded">
                            5
                        </span>
                        <span class="badge badge-warning graded">
                            6
                        </span>
                        <span class="badge badge-sky graded">
                            7
                        </span>
                        <span class="badge badge-blueberry graded">
                            8
                        </span>
                        <span class="badge badge-yellow graded">
                            9
                        </span>
                        <span class="badge badge-darkorange graded">
                            0
                        </span>
                        <span class="badge badge-magenta graded">
                            1
                        </span>
                        <span class="badge badge-purple graded">
                            2
                        </span>
                        <span class="badge badge-maroon graded">
                            3
                        </span>
                        <span class="badge badge-darkpink graded">
                            4
                        </span>
                        <span class="badge badge-pink graded">
                            5
                        </span>
                        <span class="badge badge-azure graded">
                            6
                        </span>
                        <span class="badge badge-orange graded">
                            7
                        </span>
                    </div>
                    <hr class="wide" />
                    <div class="Badges-container">
                        <h6>Square Badges</h6>
                        <span class="badge badge-default badge-square graded">
                            1
                        </span>
                        <span class="badge badge-primary badge-square graded">
                            2
                        </span>
                        <span class="badge badge-info badge-square graded">
                            3
                        </span>
                        <span class="badge badge-success badge-square graded">
                            4
                        </span>
                        <span class="badge badge-danger badge-square graded">
                            5
                        </span>
                        <span class="badge badge-warning badge-square graded">
                            6
                        </span>
                        <span class="badge badge-sky badge-square graded">
                            7
                        </span>
                        <span class="badge badge-blueberry badge-square graded">
                            8
                        </span>
                        <span class="badge badge-yellow badge-square graded">
                            9
                        </span>
                        <span class="badge badge-darkorange badge-square graded">
                            0
                        </span>
                        <span class="badge badge-magenta badge-square graded">
                            1
                        </span>
                        <span class="badge badge-purple badge-square graded">
                            2
                        </span>
                        <span class="badge badge-maroon badge-square graded">
                            3
                        </span>
                        <span class="badge badge-darkpink badge-square graded">
                            4
                        </span>
                        <span class="badge badge-pink badge-square graded">
                            5
                        </span>
                        <span class="badge badge-azure badge-square graded">
                            6
                        </span>
                        <span class="badge badge-orange badge-square graded">
                            7
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12 col-sm-12 col-xs-12">
        <h5 class="row-title before-darkorange"><i class="fa fa-list-alt darkorange"></i>DropDowns</h5>
        <div class="row">
            <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="well with-header">
                    <div class="header bordered-blue">Default DropDown</div>
                    <div class="dropdown-container">
                        <div class="dropdown-preview">
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#" tabindex="-1">Action</a>
                                </li>

                                <li>
                                    <a href="#" tabindex="-1">Another action</a>
                                </li>

                                <li>
                                    <a href="#" tabindex="-1">Something else here</a>
                                </li>

                                <li class="divider"></li>

                                <li>
                                    <a href="#" tabindex="-1">Separated link</a>
                                </li>
                                <li>
                                    <a href="#" tabindex="-1">Another link</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="well with-header">
                    <div class="header bordered-darkorange">Multi Level DropDown</div>
                    <div class="dropdown-container">
                        <div class="dropdown-preview">
                            <ul class="dropdown-menu dropdown-darkorange">
                                <li>
                                    <a href="#" tabindex="-1">Action</a>
                                </li>

                                <li>
                                    <a href="#" tabindex="-1">Another action</a>
                                </li>

                                <li>
                                    <a href="#" tabindex="-1">Something else here</a>
                                </li>

                                <li class="divider"></li>

                                <li class="dropdown-hover">
                                    <a href="#" tabindex="-1" class="clearfix">
                                        <span class="pull-left">More options</span>

                                        <i class="dropdown-expand fa fa-angle-right"></i>
                                    </a>

                                    <ul class="dropdown-menu dropdown-danger">
                                        <li>
                                            <a href="#" tabindex="-1">Second level link</a>
                                        </li>

                                        <li>
                                            <a href="#" tabindex="-1">Second level link</a>
                                        </li>

                                        <li>
                                            <a href="#" tabindex="-1">Second level link</a>
                                        </li>

                                        <li>
                                            <a href="#" tabindex="-1">Second level link</a>
                                        </li>

                                        <li>
                                            <a href="#" tabindex="-1">Second level link</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#" tabindex="-1">Another Option</a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="well with-header">
                    <div class="header bordered-palegreen">DropDown With Icons</div>
                    <div class="dropdown-container">
                        <div class="dropdown-preview">
                            <ul class="dropdown-menu dropdown-palegreen">
                                <li>
                                    <a href="#" tabindex="-1">
                                        <i class="dropdown-icon fa fa-camera"></i>
                                        Gallery
                                    </a>
                                </li>

                                <li>
                                    <a href="#" tabindex="-1">
                                        <i class="dropdown-icon fa fa-envelope"></i>
                                        Inbox
                                    </a>
                                </li>

                                <li>
                                    <a href="#" tabindex="-1">
                                        <i class="dropdown-icon fa fa-cloud-download"></i>
                                        Download
                                    </a>
                                </li>

                                <li class="divider"></li>
                                <li>
                                    <a href="#" tabindex="-1">
                                        <i class="dropdown-icon glyphicon glyphicon-cog"></i>
                                        Settings
                                    </a>
                                </li>
                                <li>
                                    <a href="#" tabindex="-1">
                                        <i class="dropdown-icon glyphicon glyphicon-log-out"></i>
                                        Log Out
                                    </a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="well with-header">
                    <div class="header bordered-yellow">DropDown With Labels & Badges</div>
                    <div class="dropdown-container">
                        <div class="dropdown-preview">
                            <ul class="dropdown-menu dropdown-purple">
                                <li>
                                    <a href="#" tabindex="-1">
                                        Notifications
                                        <span class="label label-darkorange pull-right">2</span>
                                    </a>
                                </li>

                                <li>
                                    <a href="#" tabindex="-1">
                                        Emails
                                        <span class="badge badge-info graded pull-right">5</span>
                                    </a>
                                </li>

                                <li>
                                    <a href="#" tabindex="-1">Warnings</a>
                                </li>
                                <li>
                                    <a href="#" tabindex="-1">Followers</a>
                                </li>
                                <li>
                                    <a href="#" tabindex="-1">Issues</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12 col-sm-12 col-xs-12">
        <div class="well with-header with-footer">
            <div class="header bordered-blue">Colored DropDown Buttons</div>
            <div id="dropdownbuttons">
                <div class="btn-group">
                    <a class="btn btn-default " href="javascript:void(0);">Default</a>
                    <a class="btn btn-default  dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-info " href="javascript:void(0);">info</a>
                    <a class="btn btn-info  dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-info">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-primary " href="javascript:void(0);">Primary</a>
                    <a class="btn btn-primary  dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-primary">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-success " href="javascript:void(0);">Success</a>
                    <a class="btn btn-success  dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-success">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-warning " href="javascript:void(0);">Warning</a>
                    <a class="btn btn-warning  dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-warning">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-danger " href="javascript:void(0);">Danger</a>
                    <a class="btn btn-danger  dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-danger">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-default " href="javascript:void(0);">Inverse</a>
                    <a class="btn btn-default  dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-inverse">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-blue " href="javascript:void(0);">Blue</a>
                    <a class="btn btn-blue  dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-blue">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-maroon " href="javascript:void(0);">Blue</a>
                    <a class="btn btn-maroon  dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-maroon">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
                <div class="btn-group">
                    <a class="btn btn-darkorange " href="javascript:void(0);">Combined</a>
                    <a class="btn btn-palegreen  dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu dropdown-palegreen">
                        <li>
                            <a href="javascript:void(0);">Action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Another action</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="javascript:void(0);">Separated link</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer"><code>class="dropdown-menu dropdown-info"</code></div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12 col-sm-12 col-xs-12">
        <h5 class="row-title before-success"><i class="glyphicon glyphicon-arrow-right success"></i>Progress Bars</h5>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well with-header">
                    <div class="header bordered-purple">Simple Progress Bars</div>
                    <h6>Basic</h6>
                    <progressbar type="info" value="20"></progressbar>
                    <progressbar type="warning" value="60">60% Complete (warning)</progressbar>
                    <progressbar type="danger" value="20"></progressbar>
                    <progressbar type="magenta" value="40"></progressbar>
                    <progressbar type="purple" value="60"></progressbar>
                    <progressbar type="maroon" value="80"></progressbar>
                    <hr class="wide" />
                    <h6>Stripped</h6>
                    <progressbar type="palegreen" class="progress-striped" value="40"></progressbar>
                    <progressbar type="inverse" class="progress-striped" value="40"></progressbar>
                    <progressbar type="success" class="progress-striped" value="40"></progressbar>
                    <progressbar type="info" class="progress-striped" value="20"></progressbar>
                    <progressbar type="warning" class="progress-striped" value="60"></progressbar>
                    <progressbar type="danger" class="progress-striped" value="80"></progressbar>
                    
                    <hr class="wide" />
                    <h6>Animated</h6>
                    <progressbar type="orange" class="progress-striped active" value="40"></progressbar>
                    <progressbar type="inverse" class="progress-striped active" value="40"></progressbar>
                    <progressbar type="success" class="progress-striped active" value="40"></progressbar>
                    <progressbar type="info" class="progress-striped active" value="20"></progressbar>
                    <progressbar type="warning" class="progress-striped active" value="60"></progressbar>
                    <progressbar type="danger" class="progress-striped active" value="80"></progressbar>
                    
                    <hr class="wide" />
                    <h6>Stacked</h6>
                    <progress>
                        <bar value="35" type="success"></bar>
                        <bar value="20" type="warning"></bar>
                        <bar value="10" type="danger"></bar>
                    </progress>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well with-header">
                    <div class="header bordered-warning">Advances Progress Bars</div>
                    <h6>Sizes</h6>
                    <progressbar class="progress-xxs" type="info" value="20"></progressbar>
                    <progressbar class="progress-xs" type="warning" value="60"></progressbar>
                    <progressbar class="progress-sm" type="danger" value="20"></progressbar>
                    <progressbar type="magenta" value="40"></progressbar>
                    <progressbar class="progress-lg" type="purple" value="60"></progressbar>
                    <progressbar class="progress-xlg" type="maroon" value="80"></progressbar>
                    <hr class="wide" />
                    <h6>Bordered</h6>
                    <progressbar class="progress-xxs progress-bordered" type="inverse" value="30"></progressbar>
                    <progressbar class="progress-xs progress-bordered" type="silver" value="20"></progressbar>
                    <progressbar class="progress-sm progress-bordered" type="blue" value="10"></progressbar>
                    <progressbar class="progress-bordered" type="blueberry" value="60"></progressbar>
                    <progressbar class="progress-lg progress-bordered" type="darkorange" value="20">20%</progressbar>
                    <progressbar class="progress-xlg progress-bordered progress-striped" type="magenta" value="40"></progressbar>
                    
                    <hr class="wide" />
                    <h6>Right Aligned</h6>
                    <progressbar class="progress-right" type="blue" value="40"></progressbar>
                    <hr class="wide" />
                    <h6>Without Radius Border</h6>
                    <progressbar class="progress-no-radius" type="inverse" value="40"></progressbar>
                    <hr class="wide" />
                    <h6>Shadowed</h6>
                    <progressbar class="progress-shadowed" type="info" value="20"></progressbar>
                    <progressbar class="progress-shadowed" type="warning" value="60"></progressbar>
                    <progressbar class="progress-shadowed" type="danger" value="80"></progressbar>
                    <hr class="wide" />
                    <h6>Bordered & Stacked</h6>
                    <progress class="progress-bordered">
                        <bar value="35" type="success"></bar>
                        <bar value="20" type="warning"></bar>
                        <bar value="10" type="danger"></bar>
                    </progress>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-6 col-sm-6 col-xs-12">
        <div class="well with-header">
            <div class="header bordered-warning">Vertical Progress Bars</div>
            <div class="progress progress-xlg progress-vertical ">
                <div class="progress-bar progress-bar-blue" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
                    <span>
                        40%
                    </span>
                </div>
            </div>
            <div class="progress progress-xlg progress-striped progress-vertical progress-bottom ">
                <div class="progress-bar progress-bar-magenta" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
                    <span>
                        40%
                    </span>
                </div>
            </div>
            <div class="progress progress-lg progress-striped progress-vertical progress-bottom ">
                <div class="progress-bar progress-bar-magenta" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
                    <span>
                        40%
                    </span>
                </div>
            </div>
            <div class="progress progress-sm progress-striped progress-vertical ">
                <div class="progress-bar progress-bar-magenta" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
                    <span>
                        40%
                    </span>
                </div>
            </div>
            <div class="progress progress-xs progress-vertical ">
                <div class="progress-bar progress-bar-blue" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 50%">
                    <span>
                        40%
                    </span>
                </div>
            </div>
            <div class="progress progress-xxs  progress-vertical ">
                <div class="progress-bar progress-bar-maroon" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
                    <span>
                        40%
                    </span>
                </div>
            </div>

            <hr class="wide" />
            <h6>Bordered</h6>
            <div class="progress progress-xlg progress-vertical progress-bordered">
                <div class="progress-bar progress-bar-blue" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
                    <span>
                        40%
                    </span>
                </div>
            </div>
            <div class="progress progress-xlg progress-striped progress-vertical progress-bottom progress-bordered">
                <div class="progress-bar progress-bar-magenta" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
                    <span>
                        40%
                    </span>
                </div>
            </div>
            <div class="progress progress-lg progress-striped progress-vertical progress-bottom progress-bordered">
                <div class="progress-bar progress-bar-magenta" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
                    <span>
                        40%
                    </span>
                </div>
            </div>
            <div class="progress progress-sm progress-striped progress-vertical progress-bordered">
                <div class="progress-bar progress-bar-magenta" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
                    <span>
                        40%
                    </span>
                </div>
            </div>
            <div class="progress progress-xs progress-vertical progress-bordered">
                <div class="progress-bar progress-bar-blue" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 50%">
                    <span>
                        40%
                    </span>
                </div>
            </div>
            <div class="progress progress-xxs  progress-vertical progress-bordered">
                <div class="progress-bar progress-bar-maroon" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="height: 40%">
                    <span>
                        40%
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-sm-6 col-xs-12">
        <div class="well with-header">
            <div class="header bordered-info">Dynamic Progress Bars</div>
            <div ng-controller="ProgressDemoCtrl">

                <h3>Static</h3>
                <div class="row">
                    <div class="col-sm-4"><progressbar value="55"></progressbar></div>
                    <div class="col-sm-4"><progressbar class="progress-striped" value="22" type="warning">22%</progressbar></div>
                    <div class="col-sm-4"><progressbar class="progress-striped active" max="200" value="166" type="danger"><i>166 / 200</i></progressbar></div>
                </div>

                <hr class="wide"/>
                <h3>Dynamic <button class="btn btn-sm btn-primary" type="button" ng-click="random()">Randomize</button></h3>
                <progressbar max="max" value="dynamic"><span style="white-space:nowrap;">{{dynamic}} / {{max}}</span></progressbar>

                <small><em>No animation</em></small>
                <progressbar animate="false" value="dynamic" type="success"><b>{{dynamic}}%</b></progressbar>

                <small><em>Object (changes type based on value)</em></small>
                <progressbar class="progress-striped active" value="dynamic" type="{{type}}">{{type}} <i ng-show="showWarning">!!! Watch out !!!</i></progressbar>

                <hr class="wide" />
                <h3>Stacked <button class="btn btn-sm btn-primary" type="button" ng-click="randomStacked()">Randomize</button></h3>
                <progress><bar ng-repeat="bar in stacked track by $index" value="bar.value" type="{{bar.type}}"><span ng-hide="bar.value < 5">{{bar.value}}%</span></bar></progress>

            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-6 col-sm-6 col-xs-12">
        <div class="well with-header">
            <div class="header bordered-info">Bootstrap UI Pagination</div>
            <div ng-controller="PaginationDemoCtrl">
                <h4>Default</h4>
                <div><pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination></div>
                <div>
                    <pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
                </div>
                <div>
                    <pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></pagination>
                </div>
                <div>
                    <pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></pagination>
                </div>
                <br />
                <pre>The selected page no: {{currentPage}}</pre>
                <button class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>

                <hr />
                <h4>Pager</h4>
                <pager total-items="totalItems" ng-model="currentPage"></pager>

                <hr />
                <h4>Limit the maximum visible buttons</h4>
                <pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
                <pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
                <br />
                <br />
                <pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
            </div>
        </div>
    </div>
</div>